import React, { FC } from 'react'
import { Button, Form, Input, Row } from 'antd'
import './index.less'
import { useNavigate, useLocation } from 'react-router-dom'
// import { useDispatch } from 'react-redux'
// import { loginAsync } from '~/actions/user.action'
import { LoginParams } from '~/interface/user/login'
import bg from '~/assets/common/bg.png'

const initialValues: LoginParams = {
  username: 'guest',
  password: 'guest'
  // remember: true
}

const LoginForm: FC = () => {
  const navigate = useNavigate()
  const location = useLocation()
  // const dispatch = useDispatch()

  const onFinished = async () => {
    const from = (location.state as any)?.from || { pathname: '/dashboard' }
    window.localStorage.setItem('isLogin', 'true')
    navigate(from)
    // const res = dispatch(await loginAsync(form))
    // if (!!res) {
    //   const from = (location.state as any)?.from || { pathname: '/dashboard' }
    //   window.localStorage.setItem('isLogin', 'true')
    //   navigate(from)
    // }
  }

  return (
    <div className="login-page">
      <Row
        style={{
          height: '100%',
          background: `url(${bg})`,
          backgroundSize: '100% 100%',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center'
        }}
      >
        <Form
          validateTrigger="onBlur"
          layout="vertical"
          style={{ width: '20%' }}
          onFinish={onFinished}
          className="login-page-form"
          initialValues={initialValues}
        >
          <Form.Item
            style={{ width: '80%' }}
            name="username"
            label="警号"
            rules={[{ required: true, message: '请输入用户名！' }]}
          >
            <Input placeholder="用户名" />
          </Form.Item>
          <Form.Item
            style={{ width: '80%' }}
            name="password"
            label="密码"
            rules={[{ required: true, message: '请输入密码！' }]}
          >
            <Input type="password" placeholder="密码" />
          </Form.Item>
          <Form.Item style={{ textAlign: 'center', width: '80%' }}>
            <Button htmlType="submit" type="primary" className="login-page-form_button">
              登录
            </Button>
          </Form.Item>
        </Form>
      </Row>
    </div>
  )
}

export default LoginForm
